<template>
    <div class="app-container">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getJzjRecList">刷新</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddJzjRec"
            style="margin-bottom: 15px;">新增</el-button>

        <el-table v-loading="main.loading" :data="main.jzjRecList" style="width: 100%">
            <el-table-column label="日期" prop="recDate" width="160px">
                <template slot-scope="scope">
                    {{ formattedDate(scope.row.recDate) }}
                </template>
            </el-table-column>
            <el-table-column label="结转金期初金额" prop="firstPrice" />
            <el-table-column label="结转金退款" prop="refundPrice" />
            <el-table-column label="结转金支出" prop="outPrice" />
            <el-table-column label="结转金对账" prop="recPrice" />
            <el-table-column label="备注" prop="remarks" />
            <el-table-column label="操作" align="center" fixed="right" width="120px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="openEditJzjRec(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="main.jzjRecListTotal > 0" :total="main.jzjRecListTotal"
            :page.sync="main.queryParams.pageNum" :limit.sync="main.queryParams.pageSize"
            @pagination="getJzjRecList" />

        <el-dialog :title="operationJzjRec.title" :visible.sync="operationJzjRec.isShow" width="780px" append-to-body>
            <el-form ref="operationJzjRecRef" :rules="operationJzjRec.rules" :model="operationJzjRec.form"
                label-width="130px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item prop="recDate" label="日期">
                            <el-date-picker value-format="yyyy-MM-dd" :disabled="operationJzjRec.form.id != null" style="width: 100%;"
                                v-model="operationJzjRec.form.recDate" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="firstPrice" label="期初金额">
                            <el-input v-model="operationJzjRec.form.firstPrice" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item prop="refundPrice" label="结转金退款">
                            <el-input v-model="operationJzjRec.form.refundPrice" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="outPrice" label="结转金支出">
                            <el-input v-model="operationJzjRec.form.outPrice" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item prop="recPrice" label="结转金对账">
                            <el-input v-model="operationJzjRec.form.recPrice" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="remarks" label="备注">
                            <el-input v-model="operationJzjRec.form.remarks" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postOperationJzjRec" :loading="operationJzjRec.loading">确
                    定</el-button>
                <el-button @click="closeOperationJzjRec">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import { getJzjRecList, getJzjRecById, postAddJzjRec, postEditJzjRec } from "@/api/hotel/orderRegisterJzjRec";

export default {
    name: 'JzjRec',
    data() {
        return {
            main: {
                loading: false,
                showSearch: true,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                jzjRecList: [],
                jzjRecListTotal: 0
            },
            operationJzjRec: {
                isShow: false,
                loading: false,
                title: undefined,
                rules: {
                    recDate: [
                        { required: true, message: "请选择日期", trigger: "blur" },
                    ],
                    firstPrice: [
                        { required: true, message: "请输入期初金额", trigger: "blur" },
                    ],
                    refundPrice: [
                        { required: true, message: "请输入结转金退款金额", trigger: "blur" },
                    ],
                    outPrice: [
                        { required: true, message: "请输入结转金支出金额", trigger: "blur" },
                    ],
                    recPrice: [
                        { required: true, message: "请输入结转金对账金额", trigger: "blur" },
                    ]
                },
                form: {

                }
            }
        }
    },
    created() {
        this.getJzjRecList();
    },
    methods: {
        getJzjRecList() {
            this.main.loading = true;
            getJzjRecList(this.main.queryParams).then(response => {
                this.main.jzjRecList = response.rows;
                this.main.hotelJjzListTotal = response.total;
                this.main.loading = false;
            }
            );
        },
        openAddJzjRec() {
            this.operationJzjRec.form = {};
            this.operationJzjRec.title = '新增';
            this.operationJzjRec.isShow = true;
        },
        openEditJzjRec(row) {
            const id = row.id;
            getJzjRecById({ id }).then(res => {
                this.operationJzjRec.form = res.data;
                this.operationJzjRec.title = '编辑';
                this.operationJzjRec.isShow = true;
            }
            );
        },
        postOperationJzjRec() {
            this.$refs["operationJzjRecRef"].validate(valid => {
                if (valid) {
                    if (this.operationJzjRec.form.id) {
                        postEditJzjRec(this.operationJzjRec.form).then(res => {
                            this.$modal.msgSuccess("修改成功");
                            this.operationJzjRec.isShow = false;
                            this.getJzjRecList();
                        });
                    } else {
                        postAddJzjRec(this.operationJzjRec.form).then(res => {
                            this.$modal.msgSuccess("新增成功");
                            this.operationJzjRec.isShow = false;
                            this.getJzjRecList();
                        });
                    }
                }
            })
        },
        closeOperationJzjRec() {
            this.operationJzjRec.isShow = false;
        }
    },
    computed: {
        formattedDate() {
            return function (date) {
                if (date) {
                    return date.replace(/T/g, ' ').replace(' 00:00:00', '').trim();
                } else {
                    return null;
                }
            };
        }
    }
}
</script>

<style></style>